<template>
  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    <div class="relative bg-white p-6 rounded-lg shadow-lg z-50 w-96">
      <h2 class="text-xl font-semibold mb-4">请输入内容</h2>
      <input
        type="text"
        v-model="inputValue"
        class="w-full p-2 border border-gray-300 rounded mb-4"
        placeholder="请输入内容"
      />
      <div class="flex justify-end">
        <button
          type="button"
          class="bg-red-500 text-white py-2 px-4 rounded mr-2"
          @click="closeModal"
        >
          取消
        </button>
        <button
          type="button"
          class="bg-blue-500 text-white py-2 px-4 rounded"
          @click="confirm"
        >
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    isOpen: {
      type: Boolean,
      required: true,
    },
  },
  setup(_, { emit }) {
    const inputValue = ref('');

    const closeModal = () => {
      emit('close');
    };

    const confirm = () => {
      emit('confirm', inputValue.value);
      inputValue.value = '';
    };

    return {
      inputValue,
      closeModal,
      confirm,
    };
  },
});
</script>

<style scoped>
/* 你可以在这里添加额外的样式 */
</style>